<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据分析展示</title>
    <style type="text/css">
        .view{ width: 100%; height:450px; margin-bottom:200px }
        pre { white-space: pre-wrap;       white-space: -moz-pre-wrap;  white-space: -pre-wrap;      white-space: -o-pre-wrap;   }

        * html pre { word-wrap: break-word;       white-space : normal ;      }
    </style>
</head>
<script src="js/echarts.v4.min.js"></script>
<script src="js/data.js"></script>

<body style="padding-top: 50px">
<div id="view1" class="view"></div>
<div id="view2" class="view"></div>
<div id="view3" class="view" style="margin: 0px"></div>
<div style="padding: 10px 150px; right:0px; height:300px; ">
    <pre id="text" ></pre>
</div>

<script language="JavaScript">

    drawView1("view1");

    drawView2("view2");

    drawView3("view3");



    function drawView1(id){
        var option = {
            title: {
                text: '2017年销售经理业绩分析',
                left: 'center'
            },
            color:['#188df0', '#B72B2D', '#CC765E'],
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['净业绩', '净人力成本', '净利润覆盖率'],
                align: 'left',
                left: 100,
                top: 20
            },
            grid: {
                top:'18%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: ['朝外A组', '朝外B组', '朝外C组', '新城A组', '新城B组']
            }],
            yAxis: [{
                type: 'value',
                name: '金额(万元)',
                axisLabel: {
                    formatter: function(p){
                        return p/10000;
                    }
                }
            }, {
                type: 'value',
                name: '覆盖率',
                axisLabel: {}
            }
            ],
            series: [{
                name: '净业绩',
                type: 'bar',
                barWidth: 30,
                label:{
                    show:true,
                    position:'top',
                    formatter: function(p){
                        return (p.value/10000).toFixed(0);
                    }
                },
                data: [462125, 547533, 175892, 1039469, 4375]
            }, {
                name: '净人力成本',
                type: 'bar',
                barWidth: 30,
                label:{
                    show:true,
                    position:'top',
                    formatter: function(p){
                        return (p.value/10000).toFixed(0);
                    }
                },
                data: [627921, 518252, 225958, 910273, 49453]
            }, {
                name: '净利润覆盖率',
                type: 'line',
                yAxisIndex: 1,
                data: [0.74, 1.06, 0.78, 1.14, 0.09],
                label:{
                    show:true,
                    position:'top',
                },
                symbolSize: 6,
                lineStyle: {
                    width: 2,
                    type: 'dotted'
                },
                markLine : {
                    lineStyle: { color:'#000', width:3 },
                    data : [
                        { name : '平衡点', yAxis: 1.0,
                            label:{ position:'end', formatter: function(p){ return " " + (p.value).toFixed(1); }}
                        }
                    ]
                }
            }]
        };
        Init3(option, id);
    }

    function drawView2(id){
        var option = {
            title: {
                text: '2017年门店数据分析',
                left: 'center'
            },
//            color:['#61A0A8', '#2F4554', '#C23531', '#188df0'],
            color:['#003366', '#006699', '#4cabce', '#e5323e'],
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['年度毛业绩', '年度净业绩', '门店综合成本', '盈亏平衡点'],
                orient: 'vertical',  // vertical
                align: 'left',
                left: 100,
                top: 'bottom'
            },
            grid: {
                //top:'28%',
                left: '3%',
                right: '4%',
                bottom: '18%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: ['朝外店', '新城国际店']
            }],
            yAxis: [{
                type: 'value',
                name: '金额(万元)',
                axisLabel: {
                    formatter: function(p){
                        return parseInt(p/10000);
                    }
                },
                splitLine: {
                    lineStyle: { type: 'solid' },
                    interval: function(p){
                        cout(p);
                    },
                },
//                logBase:20,
//                axisTick:{interval: 1000000},
//                interval:1000000,
//                max: 7000000,
//                min:1000000
            }
            ],
            series: [{
                name: '盈亏平衡点',
                type: 'bar',
                barWidth: 30,
                label:{
                    show:true,
                    position:'top',
                    formatter: function(p){
                        return (p.value/10000).toFixed(0);
                    }
                },
                data: [6704262, 5219452]
            },
                {
                    name: '年度净业绩',
                    type: 'bar',
                    stack: true,
                    barWidth: 30,
                    label:{
                        show:true,
                        position:'insideTop',
                        color:'#f00',
                        formatter: function(p){
                            return (p.value/10000).toFixed(0);
                        }
                    },
                    data: [1435550, 1288844]
                }, {
                name: '年度毛业绩',
                type: 'bar',
                stack: true,
                barWidth: 30,
                label:{
                    show:true,
                    position:'top',
                    formatter: function(p){
                        var e = [2871099, 2577688], d = e[p.dataIndex];
                        return (d/10000).toFixed(0);
                    }
                },
                data: [2871099 - 1435550, 2577688 - 1288844]
            }, {
                name: '门店综合成本',
                type: 'bar',
                barWidth: 30,
                label:{
                    show:true,
                    position:'top',
                    formatter: function(p){
                        return (p.value/10000).toFixed(0);
                    }
                },
                data: [3352131, 2609726],
//                markLine : {
//                    data : [
//                        { name : '朝外店盈亏平衡点', yAxis:6704262,
//                            label:{ position:'middle', formatter: function(p){ return p.name + " " + (p.value/10000).toFixed(1); }}
//                        },
//                        { name : '新城国际店盈亏平衡点', yAxis:5219452,
//                            label:{ position:'middle', formatter: function(p){ return p.name + " " + (p.value/10000).toFixed(1); }}
//                        }
//                    ]
//                }
            },
            ]
        };
        Init3(option, id);
    }

    function drawView3(id){
        //// ['2017/8/4', '初中', '凌雪', '新城店', 7, 480020.00 ]
        var level = { '初中':1, '中专':1, '高中':2, '大专':3, '本科':4 };
        function R(d){ return 14; level[d] * 5 ; }
        var data = [[], []], sumX = 0, sumY = 0, sumL = 0;
        var offset = {
            48: [-5, 0], 43: [3, 8], 19:[0, -7], 26:[4, -7], 27:[-2, 0], 13:[3, -5],
            64:[-5, 0], 50:[0, -6], 3:[5, -5], 47:[5, -8]
        };
        var html = "";
        source.forEach(function(line, i){
            if(line[4]==null)return;
            var month = (line[4]==0) ? line[4]+1 : line[4];
            sumX += line[5];
            sumY += month;
            sumL++;
            var item = {value:[line[5], month, R(line[1]), line[2], line[3], line[1], i + 1]};
            if(i in offset){
                item['label'] = {offset:offset[i]};
            }
            if(line[0]!=''){    //离职
                data[0].push(item);
            }else{
                data[1].push(item);
            }
            html += i + 1 + ": " + line[2] + "\t";
        });

        var p = sumX/ sumY;// / sumL ;

        var label = {
            normal: {
                show: true,
                formatter: function (p) { return p.value[6]; },
                fontSize:13,
                color:'#000',
                position: 'center'
            },
            emphasis: {
                show: true,
                formatter: function (p) {
                    return p.value[3] + ', ' + p.value[4] + ', ' + p.value[5] + '学历';
                },
                color:'#000',
                position: 'right'
            }
        };

        var option = {
            title: {
                text: '员工业绩分析',
                left: 'center'
            },
            legend: {
                left: 200,
                top: 20,
                data: ['在职', '离职']
            },
            xAxis: {
                splitLine: {
                    lineStyle: { type: 'dashed' }
                },
                axisTick:{ interval:10 },
                axisLabel: {
                    formatter: function(p){
                        return p/10000;
                    }
                },
                interval: 50000,
                name:'业绩(万元)'
            },
            grid:{ top:'80px' },
            yAxis: {
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                interval: 2,
                axisLabel:{margin:30, formatter:function(p){ return p>12 ? '' : p; }},
                max:14,
                name:'工作月数',
                scale: true
            },
            series: [{
                name: '在职',
                data: data[0],
                type: 'scatter',
                symbolSize: function (data) {
                    return data[2];
                },
                label: label,
                itemStyle: {
                    normal: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(120, 36, 50, 0.5)',
                        shadowOffsetY: 5,
                        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                            offset: 0,
                            color: 'rgb(251, 118, 123)'
                        }, {
                            offset: 1,
                            color: 'rgb(204, 46, 72)'
                        }])
                    }
                }
            }, {
                name: '离职',
                data: data[1],
                type: 'scatter',
                symbolSize: function (data) {
                    return data[2];
                },
                label: label,
                itemStyle: {
                    normal: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(25, 100, 150, 0.5)',
                        shadowOffsetY: 5,
                        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                            offset: 0,
                            color: 'rgb(129, 227, 238)'
                        }, {
                            offset: 1,
                            color: 'rgb(25, 183, 207)'
                        }])
                    }
                },
                markLine:{
                    label: { normal: { color:'#f00',
                        textStyle: { align: 'top', fontSize: 16 }
                    }},
                    lineStyle: {
                        normal: { type: 'dashed', width:1 }, //'solid'
                    },
                    tooltip: {
                        formatter: '业绩均线'
                    },
                    data: [
                        [{coord: [0, 0], symbol: 'none'}, { coord: [14 * p, '14'], symbol: 'none',
                            label: { normal: { formatter: '业绩均线', color:'#f00'}}
                        }],
                        [{coord: [0, 0], symbol: 'none'}, { coord: [14 * 20000, 14], symbol: 'none',
                            label: { normal: { formatter: '业绩盈利线', color:'#f00', position:'end'}}
                        }]
                    ]
                }
            }]
        };

        Init3(option, id);

        document.getElementById("text").innerHTML = html ;
    }



    function cout(obj){ console.log(obj); }
    function Init3(option, id){
        var myChart = echarts.init(document.getElementById(id), 'shine');
        myChart.setOption(option);
        myChart.hideLoading();
        return myChart;
    }

</script>
</body>
</ht